import { DatasetListItem } from "@/common"
import { IconButton, SvgIcon } from "@/components/icon"
import { useSettings } from "@/store/settingStore"
import { useThemeToken } from "@/theme/hooks"
import { ThemeMode } from "@/types/enum"
import type { MenuProps } from "antd"
import { Button, Divider, Dropdown } from "antd"
import { CSSProperties } from "react"

type Props = {
  dataset: DatasetListItem,
  onClicked?: (dataset: DatasetListItem) => void
}
export default function DatasetCard({ dataset, onClicked }: Props) {
  const { themeMode } = useSettings();
  const { colorPrimary, colorBgBase, colorBgLayout } = useThemeToken();

  const items: MenuProps['items'] = [
    {
      key: '1',
      label: ' 编辑',
      icon: <SvgIcon icon="ic-edit" size="16" />,
    },
    {
      key: '2',
      label: ' 移动',
      icon: <SvgIcon icon="ic-move" size="16" />,
    },
    {
      key: '3',
      label: ' 导出',
      icon: <SvgIcon icon="ic-import" size="16" />,
    },
    {
      key: '4',
      danger: true,
      label: ' 删除',
      icon: <SvgIcon icon="ic-delete" size="16" />,
    },
  ];

  const style: CSSProperties = {
    height: '100%',
    padding: '16px',
    borderRadius: '16px',
    backgroundColor:
      themeMode === ThemeMode.Light ? colorBgLayout : 'rgba(145, 158, 171, 0.12)',
  };
  return (
    <div className="relative w-full py-1 hover:shadow-lg rounded-lg cursor-pointer" style={style}>
      <div className="ml-2 items-center justify-start flex">
        <div style={{backgroundColor: "white", borderRadius: "5px", padding: "5px"}}>
          {dataset.type == 'folder' ? <SvgIcon icon="ic_folder" size="24" /> : <SvgIcon icon="ic_file" size="24" />}
        </div>
        <span className="font-bold ml-2">{dataset.name}</span>
        {/* <Dropdown menu={{items}} className="mr-0 ml-auto hover:shadow-lg ">
         
          123123
        </Dropdown> */}
        <Dropdown menu={{ items }} placement="bottomLeft"  className="mr-0 ml-auto">
          <Button style={{border:'none', backgroundColor: 'transparent'}}>
            <SvgIcon icon="ic-more" size="24" />
          </Button>
        </Dropdown>
      </div>
      <div className="ml-2 mt-4 text-gray-600 text-sm">
        {dataset.type == 'folder' ? '这是一个文件夹' : (<span>{dataset.intro == '' ? '还没有介绍' : dataset.intro}</span>)}
      </div>
    </div>
  )
}